<template>
    <div class="addCommodity-box">
        <div class="addCommodity-one">
            <div class="addCommodity-one-left"><span></span> &nbsp&nbsp课程添加</div>
            <div class="addCommodity-one-right">
                <el-button class="edit_btn" @click="$router.push('/Course')"><i class="el-icon-arrow-left"></i><span>返回</span></el-button>
                <el-button class="edit_btn" @click="shua"><i class="el-icon-refresh">&nbsp&nbsp刷新</i></el-button>
            </div>
        </div>
        <div class="addCommodity-two">
            <div class="addCommodity-two-xinxi">
                <div class="right"></div> <!--向右的三角形-->
                <div class="addCommodity-two-ding"><i class="el-icon-collection-tag" style="color: #fff;font-size: 18px;"><div>添加课程信息</div></i></div>
            </div>
            <div class="addCommodity-two-form">
                <el-row>
                    <el-form
                            :label-position="labelPosition"
                            label-width="110px"
                            ref="courseAdd"
                            :model="courseAdd"
                            :rules="rule">
                        <!-- 课程分类 -->
                        <el-col :span="10" :offset="6">
                            <el-form-item label="课程分类：">
                                <el-select v-model="courseAdd.classId" placeholder="请选择课程分类" style="width:100%">
                                    <el-option label="后端" :value="1"></el-option>
                                    <el-option label="前端" :value="2"></el-option>
                                    <el-option label="运营" :value="3"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <!-- 课程编号 -->
                        <el-col :span="10" :offset="6">
                            <el-form-item label="课程编号：" prop="userId">
                                <el-input v-model="courseAdd.userId" placeholder="请选择课程编号"></el-input>
                            </el-form-item>
                        </el-col>
                        <!-- 课程名称 -->
                        <el-col :span="10" :offset="6">
                            <el-form-item label="课程名称：" prop="courseName">
                                <el-input v-model="courseAdd.courseName" placeholder="请选择课程名称"></el-input>
                            </el-form-item>
                        </el-col>
                        <!-- 课程销量 -->
                        <el-col :span="10" :offset="6">
                            <el-form-item label="课程销量：" prop="saleNum">
                                <el-input v-model="courseAdd.saleNum" placeholder="请选择课程销量"></el-input>
                            </el-form-item>
                        </el-col>
                        <!-- 课程状态 -->
                        <el-col :span="10" :offset="6">
                            <el-form-item label="课程状态：">
                                <el-select v-model="courseAdd.courseStatus" placeholder="请选择课程状态" style="width:100%">
                                    <el-option label="已上架" :value="1"></el-option>
                                    <el-option label="未上架" :value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <!-- 课程审核 -->
                        <el-col :span="10" :offset="6">
                            <el-form-item label="课程审核：">
                                <el-select v-model="courseAdd.courseCstatus" placeholder="请选择课程审核" style="width:100%">
                                    <el-option label="未审核" :value="3"></el-option>
                                    <el-option label="审核中" :value="4"></el-option>
                                    <el-option label="审核失败" :value="5"></el-option>
                                    <el-option label="其他" :value="6"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <!-- 课程售价 -->
                        <el-col :span="10" :offset="6">
                            <el-form-item label="课程售价：" prop="coursePrice">
                                <el-input v-model="courseAdd.coursePrice" placeholder="请选择课程售价"></el-input>
                            </el-form-item>
                        </el-col>
                        <!-- 课程上传图片 -->
                        <el-col :span="10" :offset="6">
                            <el-form-item label="课程预览图：" prop="courseUrl">
                                <el-upload
                                        ref="courseAdd"
                                        action=""
                                        accept="image/*"
                                        :limit="Number(1)"
                                        list-type="picture-card"
                                        :on-preview="handlePictureCardPreview"
                                        :on-remove="handleRemove"
                                        :on-change="UploadImage"
                                        :before-upload="beforeUpload"
                                        :file-list="fileList"
                                        :auto-upload="false"
                                        :class="{hide:hideUploadEdit}"
                                        class="upload_img">
                                    <i class="el-icon-plus"></i>
                                    <template #tip>
                                        <div style="font-size: 12px;color: #919191;">单次限制上传一张图片</div>
                                    </template>
                                </el-upload>
                                <el-dialog :visible.sync="dialogVisible" style="line-height: 0;">
                                    <img style="width: 100%;height: 100%;" :src="dialogImageUrl" alt=""/>
                                </el-dialog>
                            </el-form-item>
                        </el-col>
                        <!-- 课程视频 -->
                        <!--<el-col :span="10" :offset="6">
                            <el-form-item label="预览视频：">
                                <el-upload
                                class="avatar-uploader el-upload&#45;&#45;text"
                                action="http://localhost:8088/api/uploadVidoe3"
                                :drag="{Plus}"
                                :show-file-list="false"
                                :data="{SavePath:this.Path.url}"
                                :on-success="hanadleVideoSuccess"
                                :before-upload="beforeUploadVideo"
                                :on-progress="uploadVideoProcess">
                                    <i v-if="Plus" class="el-icon-upload"></i>
                                    <div v-if="Plus" class="el-upload__text">
                                        将文件拖到此处，或<em>点击上传</em>
                                    </div>
                                    <el-progress
                                        v-if="videoFlag == true"
                                        type="circle"
                                        :percentage="videoUploadPercent"
                                        style="margin-top: 30px">
                                    </el-progress>
                                    <div class="el-upload__tip" slot="tip">
                                        只能上传mp4/flv/avi文件，且不能超过300MB
                                    </div>
                                </el-upload>
                            </el-form-item>
                        </el-col>-->
                        <!-- 课程标签 -->
                        <el-col :span="15" :offset="6">
                            <el-form-item label="课程标签：" prop="courseIntro">
                                <el-input
                                        v-model="courseAdd.courseIntro"
                                        type="textarea"
                                        :autosize="{ minRows: 4, maxRows: 4}"
                                        placeholder="请输入课程标签">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <!-- 课程介绍 -->
                        <el-col :span="15" :offset="6">
                            <el-form-item label="课程介绍：" prop="courseInfo">
                                <el-input
                                        placeholder="请输入课程介绍"
                                        type="textarea"
                                        :autosize="{ minRows: 6, maxRows: 4}"
                                        v-model="courseAdd.courseInfo">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <!-- 课程推荐 -->
                        <el-col :span="10" :offset="6">
                            <el-form-item label="课程推荐：">
                                <el-checkbox-group v-model="courseAdd.recommend">
                                    <el-checkbox :true-label="2" label="新品" checked></el-checkbox>
                                    <el-checkbox :true-label="3" label="推荐"></el-checkbox>
                                    <el-checkbox :true-label="4" label="其他"></el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
                        </el-col>
                        <!-- 上传人员 -->
                        <el-col :span="10" :offset="6">
                            <el-form-item label="上传人员：">
                                <el-radio-group v-model="courseAdd.createId">
                                    <el-radio  label="1">张三</el-radio>
                                    <el-radio label="2">李四</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-form>
                </el-row>
                <div slot="footer" class="btn">
                    <el-button type="success" class="footer_qd" @click="addInsert('courseAdd')">完成，提交商品</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "CourseAddInsert",
        inject: ['reload'],//注入
        data(){
            return{
                //图片部分
                //上传的文件列表
                fileList:[],
                //对话框中的图片（放大效果）
                dialogImageUrl:"",
                //是否隐藏上传按钮
                hideUploadEdit:false,
                //限制上传按钮上传1张，1张之后隐藏
                limit:1,
                //图片的弹窗
                dialogVisible: false,
                /*//视频部分
                videoForm: {
                    videoId: '',
                    videoUrl: ''
                },
                videoFlag: false,
                Plus: true,
                //上传视频时带的参数，这个地址就是后端保存磁盘的地址。可以更改。不建议放F盘，有的电脑可能没有F盘，只有C和D
                Path: {
                    url: 'D:/video/videoUpload'
                },
                videoUploadPercent: 0,*/

                //添加按钮中的的label的样式
                labelPosition: "right",
                //添加按钮中的数据
                courseAdd:{
                    url:"",//课程视频
                    courseUrl:"",//课程图片
                    classId: "",//课程分类（1、后端2、前端3、运营）
                    userId:"",//用户ID（课程编号）
                    courseName: "",//课程名称
                    saleNum:"",//课程销量
                    courseIntro: "",//课程简介（课程标签）
                    courseInfo: "",//课程详情（课程介绍）
                    coursePrice:"",//课程价格
                    recommend:"",//课程推荐
                    createId:"1",//创建人（上传人员）（1、张三2、李四）
                    courseCstatus:"",//课程审核
                    courseStatus:""//课程状态
                },
                //添加的时候必填项验证
                rule: {
                    courseName:[
                        {required:true,message:'课程名称不可以为空'},
                        {min:3,max:10,message:'长度在3到10个字符'}
                    ],
                    courseUrl:[
                        {required:true,message:'课程图片不可以为空'},
                        {message:'请输入课程图片'}
                    ],
                    courseIntro:[
                        {required:true,message:'课程标签不可以为空'},
                        {message:'请输入课程标签'}
                    ],
                    courseInfo:[
                        {required:true,message:'课程介绍不可以为空'},
                        {message:'请输入课程介绍'}
                    ],
                    userId:[
                        {required:true,message:'课程编号不能为空'},
                        {type:'number',message:'课程售价必须为数字值',transform:(value) => Number(value)}
                    ],
                    saleNum:[
                        {required:true,message:'课程销量不能为空'},
                        {type:'number',message:'课程销量必须为数字值',transform:(value) => Number(value)}
                    ],
                    coursePrice:[
                        {required:true,message:'课程售价不能为空'},
                        {type:'number',message:'课程售价必须为数字值',transform:(value) => Number(value)}
                    ],
                }
            }
        },
        methods:{
            //限制图片的上传
            beforeUpload(file){
                const isLt2M = file.size / 1024 /1024 < 2;
                if (!isLt2M){
                    this.$message.error("上传图片不能超过2MB");
                }
                return isLt2M;
            },
            //上传图片的方法
            UploadImage(file,fileList){
                this.hideUploadEdit = fileList.length >= this.limit;
                console.log(file);
                let fd = new FormData()
                //传给后台接收的名字
                fd.append("file",file.raw)
                this.$http.post("/fileImg/mainImage",fd,{headers:{"Content-Type" : "multipart/form-data"}}).then(response =>{
                    //上传成功后返回的数据
                    console.log("上传图片到："+response.data);
                    //将图片地址给到表单
                    this.courseAdd.courseUrl = response.data
                })
            },
            //移除图片的功能
            handleRemove(file,fileList){
                console.log(file,fileList);
                this.hideUploadEdit = fileList.length >= this.limit;
            },
            //预览图片功能
            handlePictureCardPreview(file){
                console.log(file.url);
                this.courseAdd.courseUrl = file.name
                this.dialogVisible = true
                this.dialogImageUrl = file.url
            },
           /* // 视频上传前执行
            beforeUploadVideo (file) {
                //文件大小
                const isLt300M = file.size / 1024 / 1024 < 300
                //视频后缀检查
                if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb'].indexOf(file.type) === -1) {
                    this.$message.error('请上传正确的视频格式')
                    return false
                }
                if (!isLt300M) {
                    this.$message.error('上传视频大小不能超过300MB哦!')
                    return false
                }
            },
            // 视频上传过程中执行
            uploadVideoProcess (event, file, fileList) {
                this.Plus = false
                this.videoFlag = true
                this.videoUploadPercent =+ file.percentage.toFixed(0)
            },
            // 视频上传成功是执行
            hanadleVideoSuccess (res, file) {
                this.Plus = false
                this.videoUploadPercent = 100
                console.log(res)
                // 如果为200代表视频保存成功
                if (res.resCode === '200') {
                    // 接收视频传回来的名称和保存地址
                    this.videoForm.videoId = res.courseName
                    this.videoForm.videoUrl = res.courseUrl
                    this.$message.success('视频上传成功！')
                } else {
                    this.$message.error('视频上传失败，请重新上传！')
                }
            },*/
            //添加完成的按钮
            addInsert(formName){
                //validate ：需要表单重新验证一下
                this.$refs[formName].validate((valid) =>{
                    if (valid){
                        this.$http.post("/JsCourse/getCreate",{
                            "courseUrl":this.courseAdd.courseUrl,
                            "classId":this.courseAdd.classId,
                            "userId":this.courseAdd.userId,
                            "courseName":this.courseAdd.courseName,
                            "saleNum":this.courseAdd.saleNum,
                            "courseIntro":this.courseAdd.courseIntro,
                            "courseInfo":this.courseAdd.courseInfo,
                            "coursePrice":this.courseAdd.coursePrice,
                            "recommend":this.courseAdd.recommend,
                            "createId":this.courseAdd.createId,
                            "courseCstatus":this.courseAdd.courseCstatus,
                            "courseStatus":this.courseAdd.courseStatus
                        }).then(res =>{
                            this.$http.get("/CourseLog/insertCourseLog",{
                                params:{
                                    "courseName":this.courseAdd.courseName,
                                    "coursePrice":this.courseAdd.coursePrice,
                                    "coursePrices":this.courseAdd.coursePrice,
                                    "courseState":this.courseAdd.courseStatus,
                                    "courseShe":this.courseAdd.courseCstatus,
                                    "coursePeople":this.courseAdd.createId
                                }
                            })
                            alert("添加成功！！！");
                        }).catch(err =>{
                            alert("添加数据请求失败！！！");
                        })
                    } else{
                        console.log("error submit")
                        return false;
                    }
                })
            },
            //刷新按钮
            shua(){
                this.reload();//局部刷新
            },
        }
    }
</script>

<style scoped long="less">
    /*初始化样式*/
    *{
        padding: 0;
        margin: 0;
        font-size: 13px;
    }
    /*改变按钮的样式*/
    .edit_btn{
        margin-top: 8px;
        height: 35px;
        line-height: 10px;
        width: 100px;
    }
    /*在外边套一个盒子，使页面不会乱跑*/
    .addCommodity-box{
        width: 1470px;
    }
    /*课程添加需要页面百分百*/
    .addCommodity-one{
        height: 50px;
        line-height: 50px;
        width: 100%;
        background: #F3F3F3;
    }
    /*课程添加需要左浮动*/
    .addCommodity-one-left{
        float: left;
        color: #99A4BF;
    }
    /*返回等一些按钮需要右浮动*/
    .addCommodity-one-right{
        float: right;
        padding-right: 125px;
    }
    /*课程添加需要一个绿色的边框*/
    .addCommodity-one-left span{
        padding-left: 0px;
        border-left: 5px solid #1ABC9C;
    }
    /*添加课程需要居中四边需要一个边框*/
    .addCommodity-two{
        width: 1000px;
        margin: 0 auto;
        border: 1px solid #E4E4E4;
    }
    /*添加课程信息的样式*/
    .addCommodity-two-xinxi{
        position: relative;
        top: 40px;
        left: -200px;
        float: left;
        width: 230px;
        height: 50px;
        background: rgba(158,167,180,.8);
    }
    /*需要设置一个右边的三角形边框以及需要定位定上去*/
    .addCommodity-two-xinxi .right{
        width: 0;
        height: 0;
        border-top: 30px solid transparent;
        border-left: 26px solid rgba(158,167,180,.8);
        border-bottom: 20px solid transparent;
        font-size: 0;
        line-height: 0;
        position: relative;
        left: 230px;
    }
    /*添加课程信息的文字需要一个定位*/
    .addCommodity-two-ding{
        position: relative;
        top: -35px;
        padding-left: 25px;
    }
    /*课程信息需要右浮动*/
    .addCommodity-two-ding div{
        font-size: 18px;
        color: #fff;
        float: right;
    }
    /*课程的表单信息样式*/
    .addCommodity-two-form{
        padding-top: 100px;
    }
    /*弹窗的确定按钮样式*/
    .footer_qd{
        background: #1ABC9C;
        width: 150px;
    }
    /*添加按钮的居中样式*/
    .btn{
        text-align: center;
        padding-bottom: 50px;
    }
    /*预览图效果*/
    .imgs{
        width: 330px;
        height: 350px;
        border: 1px solid #E4E4E4;
    }
    .imgs li{
        list-style: none;
        margin: 5px 5px 0px 5px;
        float: left;
    }
    .imgs li img{
        width: 100px;
        height: 100px;
    }
</style>
<style long="less">
    /*隐藏上传按钮的图片（上传最大限制隐藏）*/
    .hide .el-upload--picture-card {
        display: none;
    }
</style>